$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    position: relative;

    .swiper-container {
      width: 100%;

      .info {
        width: 100%;
        position: relative;

        .bg {
          img {
            width: 100%;
            display: block;
            object-fit: cover;
            height: 100vh;
          }
        }

        .text {
          position: absolute;
          left: 50%;
          width: 84vw;
          top: 45%;
          transform: translate(-50%, -50%);

          .en {
            color: #FFF;
            font-size: $fontSize_40!important;
            font-weight: 700;
            text-align: center;
            height: 60/$f+vw;
            overflow: hidden;
            span{
              display: inline-block;
              position: relative;
              top: 75px;
              opacity: 0;
              transition: 0.4s;
              min-width: 10px;
            }
          }



          .cn {
            color: #FFF;
            font-size: $fontSize_54;
            font-weight: 700;
            text-align: center;
            margin-top: 1vw;
            height: 77/$f+vw;
            overflow: hidden;
            span{
              display: inline-block;
              position: relative;
              top: 75px;
              opacity: 0;
              transition: 0.4s;
              min-width: 10px;
            }
          }
        }
      }

      .swiper-slide-active{
        .cn{
          span{
            top: 0!important;
            opacity: 1!important;
          }
        }
      }
    }

    .swiper-pagination {
      position: absolute;
      right: 5%;
      bottom: 5%;
      display: flex;
      width: 90%;
      justify-content: center;

      .swiper-pagination-bullet {
        border-radius: 50%;
        width: 21px;
        height: 21px;
        background-color: rgba(255, 255, 255, .3);
        opacity: 1;
        margin: 0 10px;
        position: relative;

        &::before {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(278deg, #0DB56F 7.55%, #42B438 100.45%);
          border-radius: 50%;
          opacity: 0;
          z-index: -1;
          transform-origin: center;
        }
      }

      .swiper-pagination-bullet-active {
        background: linear-gradient(278deg, #0DB56F 7.55%, #42B438 100.45%);

        &::before {
          animation: long 4s ease-out infinite both;
          opacity: 1;
        }

        @keyframes long {
          form {
            transform: scale(0);
            opacity: 1;
          }

          to {
            transform: scale(2);
            opacity: 0;
          }
        }
      }
    }

    .add {
      position: absolute;
      left: 50%;
      bottom: 35%;
      transform: translateX(-50%);
      z-index: 10;

      img {
        transition: all 600ms;
      }

      &:hover {
        img {
          transform: rotate(180deg);
        }
      }
    }

    .prev {
      position: absolute;
      left: 5%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      cursor: pointer;
    }

    .next {
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      cursor: pointer;
    }
  }

  .products {
    width: 85vw;
    margin: 5vw auto;

    .t {
      position: relative;

      .p1 {
        color: #333;
        font-size: $fontSize_48;
        font-weight: 600;
        text-align: center;
      }

      a {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        color: #000;
        font-size: $fontSize_22;
        font-weight: 350;

        svg {
          display: block;
          margin-left: 10px;
        }
      }
    }

    .ptypes {
      width: 95%;
      margin: 4vw auto 2vw auto;
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;

      .item {
        text-align: center;
        cursor: pointer;
        // margin-right: 6vw;

        .icon {
          width: 70/$f+vw;
          height: 70/$f+vw;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin: 0 auto;

          &::before {
            content: '';
            display: block;
            background: linear-gradient(278deg, #0DB56F 7.55%, #42B438 100.45%);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            opacity: 0;
            transition: all 600ms;
            z-index: -1;
          }

          img {
            max-width: 80%;
            max-height: 80%;
            object-fit: contain;
            transition: all 600ms;
          }
        }

        p {
          color: #333;
          font-size: $fontSize_22;
          padding: 5px 0 10px 0;
          transition: all 600ms;
          position: relative;

          &::after {
            content: '';
            display: block;
            position: absolute;
            left: -10px;
            bottom: 0;
            width: calc(100% + 20px);
            height: 3px;
            background: #36AC2C;
            opacity: 0;
            transition: all 600ms;
          }
        }
      }

      .active {
        .icon {
          &::before {
            opacity: 1;
          }

           img{
            filter: invert(100%);
           }
        }

        p {
          font-weight: bold;
          color: #36AC2C;

          &::after {
            opacity: 1;
          }
        }
      }
    }

    .cboxs {
      .content {
        display: none;

        .dbox1 {
          justify-content: space-between;
          gap: 3%;
          align-items: flex-end;
          display: flex;

          .l {
            width: 45%;

            .pic {
              overflow: hidden;
              display: block;

              img {
                width: 100%;
                display: block;
                object-fit: cover;
                transition: all 600ms;
              }

              &:hover {
                img {
                  transform: scale(1.05);
                }
              }
            }
          }

          .r {
            width: 55%;
            display: flex;

            a {
              width: 30%;
              display: block;
              position: relative;

              .pic {
                overflow: hidden;

                img {
                  width: 100%;
                  display: block;
                  object-fit: cover;
                  transition: all 600ms;
                }
              }

              p {
                color: rgba(51, 51, 51, 0.8);
                font-size: $fontSize_18;
                position: absolute;
                left: 0;
                bottom: -2.5vw;
                width: 100%;
                text-align: center;
                transition: all 600ms;
              }

              &:hover {
                .pic {
                  img {
                    transform: scale(1.05);
                  }
                }

                p {
                  color: #36AC2C;
                }
              }
            }

            a:nth-child(2) {
              margin: 0 5%;
            }
          }
        }

        .text {
          margin-top: 1vw;
          display: block;

          .p1 {
            color: #36AC2C;
            font-size: $fontSize_22;
            font-weight: 600;
          }

          .des {
            color: rgba(51, 51, 51, 0.8);
            font-size: $fontSize_18;
            margin-top: 5px;
          }
        }
      }

      .show {
        display: block;
      }
    }
  }

  .about {
    background: linear-gradient(280deg, #92D341 -27.68%, #4FAD24 104.15%);
    padding: 5vw 7.5vw;
    position: relative;
    margin-top: 15vw;

    .d1 {
      width: 50vw;

      .t {
        position: relative;

        .p1 {
          color: #FFF;
          font-size: $fontSize_48;
          font-weight: 600;
        }

        a {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          color: #FFF;
          font-size: $fontSize_22;
          font-weight: 350;

          svg {
            display: block;
            margin-left: 10px;
          }
        }
      }

      .des {
        color: #FFF;
        text-align: justify;
        font-size: 20/$f+vw;
        font-weight: 350;
        line-height: 1.7;
        margin: 4vw 0 6vw 0;
      }
    }

    .d2 {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .item {
        text-align: center;

        .nums {
          display: flex;
          align-items: center;

          .count {
            color: #FFF;
            font-size: $fontSize_54;
            font-weight: bold;
          }

          span {
            color: #FFF;
            font-size: $fontSize_54;
            font-weight: bold;
          }

          i {
            font-style: normal;
            font-size: $fontSize_18;
            color: white;
            transform: translate(5px, 1vw);
          }
          span:last-child{
             font-style: normal;
            font-size: $fontSize_24;
            color: white;
            transform: translate(5px, 1vw);
          }
        }

        .tag {
          margin-top: 5px;
          color: white;
          font-size: $fontSize_24;
        }
      }
    }

    .video {
      position: absolute;
      right: 7.5vw;
      top: -8vw;
      width: 26vw;
      transition: all 600ms;
      z-index: 10;

      video {
        width: 100%;
        display: block;
        object-fit: cover;
        height: 500/$f+vw;
      }

      .play {
        cursor: pointer;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        transition: all 600ms;

        svg {
          width: 80/$f+vw;
        }
      }

      .close {
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
        display: none;

        img {
          width: 30px;
        }
      }
    }

    .bg {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 18vw;

      img {
        max-width: 100%;
      }
    }
  }

  .news {
    width: 85vw;
    margin: 5vw auto;

    .t {
      position: relative;

      .p1 {
        color: #333;
        font-size: $fontSize_48;
        font-weight: 600;
        text-align: center;
      }

      a {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        color: #000;
        font-size: $fontSize_22;
        font-weight: 350;

        svg {
          display: block;
          margin-left: 10px;
        }
      }
    }

    .box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 5vw 0;

      .l {
        width: 45%;

        .types {
          display: flex;
          align-items: center;

          .item {
            color: #333;
            font-size: $fontSize_24;
            margin-right: 5vw;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 600ms;

            &:hover {
              color: #36AC2C;
              font-weight: bold;
              border-color: rgba(54, 172, 44, 1);
            }
          }

          .active {
            color: #36AC2C;
            font-weight: bold;
            border-color: rgba(54, 172, 44, 1);
          }
        }

        .allNews {
          margin-top: 3vw;

          .list {
            display: none;

            a {
              display: block;
              border-bottom: 1px solid #D9D9D9;
              padding: 1vw 0;
              margin-top: 1vw;

              .time {
                color: rgba(51, 51, 51, 0.8);
                font-size: $fontSize_16;
              }

              .pt {
                color: #333;
                font-size: $fontSize_24;
                font-weight: 350;
                margin: 5px 0;
                transition: all 600ms;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .des {
                color: rgba(51, 51, 51, 0.8);
                font-size: $fontSize_18;
                font-weight: 350;
              }

              &:hover {
                .pt {
                  font-weight: bold;
                  color: #36AC2C;
                }
              }
            }
          }

          .show {
            display: block;
          }
        }
      }

      .r {
        width: 45%;

        a {
          display: block;
          text-align: center;

          .pic {
            overflow: hidden;

            img {
              width: 100%;
              display: block;
              object-fit: cover;
              transition: all 600ms;
            }
          }

          .time {
            color: #707070;
            font-size: $fontSize_16;
            margin: 1vw 0 5px 0;
            font-weight: 300;
          }

          .pt {
            color: #333;
            font-size: $fontSize_24;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .des {
            color: rgba(51, 51, 51, 0.80);
            font-size: $fontSize_18;
          }

          &:hover {
            .pic {
              img {
                transform: scale(1.05);
              }
            }
          }
        }
      }
    }
  }


  .partners {
    background: url(../images/mapBg.png) no-repeat;
    background-size: cover;
    padding: 5vw 0;

    .t {
      color: #333;
      font-size: $fontSize_48;
      font-weight: 600;
      text-align: center;
    }

    .t2 {
      color: rgba(51, 51, 51, 0.8);
      font-size: $fontSize_18;
      font-weight: 350;
      text-align: center;
      margin: 10px 0 3vw 0;
    }

    .scroll-container {
      width: 100%;
      overflow: hidden;

      .animate_box {
        display: flex;
        width: max-content;
        animation: ani-loop 20s linear infinite;

        .flex-xb {
          display: flex;
          flex-wrap: wrap;

          .icon {
            width: 150/$f+vw;
            border-radius: 12px;
            height: 150/$f+vw;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8vw;
            background: #FFF;
            box-shadow: 0px 0px 20.001px 0px rgba(0, 0, 0, 0.08);

            img {
              max-height: 80%;
              max-width: 80%;
              display: block;
              object-fit: contain;
            }
          }
        }

        @keyframes ani-loop {
          0% {
            transform: translateX(0);
          }

          100% {
            transform: translateX(-50%);
          }
        }
      }

      .animate_box2 {
        animation-direction: reverse;
        margin: 2vw 0;
      }
    }
  }

  .business {
    padding: 2vw 0 0 0;
    overflow: hidden;

    .box {
      width: 100%;
      display: flex;
      background: url(../images/bus.png) no-repeat;
      background-size: cover;

      .item {
        width: 50%;
        text-align: center;
        padding: 5vw 0 8vw 0;
        position: relative;

        .text {
          position: relative;
          z-index: 10;

          .icon {
            img {
              width: 100/$f+vw;
              height: 100/$f+vw;
            }
          }

          .p1 {
            color: #FFF;
            font-size: $fontSize_40;
            font-weight: 500;
            margin: 5px 0;
          }

          .p2 {
            color: #FFF;
            font-size: $fontSize_22;
            font-weight: 500;
          }

          a {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1vw;

            p {
              color: #FFF;
              font-size: $fontSize_18;
              font-weight: 300;
              margin-left: 8px;
            }
          }
        }
      }

      .item:nth-child(1) {
        &::before {
          content: '';
          display: block;
          background: linear-gradient(280deg, #92D341 -27.68%, #4FAD24 104.15%);
          opacity: .89;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          transform: skewX(-20deg) scale(1.1) translate(-3.5vw, 1.2vw);
          transition: all 600ms;
        }
      }

      .item:nth-child(2) {
        &::after {
          content: '';
          display: block;
          background: linear-gradient(180deg, #09152B 0%, rgba(9, 21, 43, 0.71) 100%);
          opacity: 0.9;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          transform: skewX(-20deg) scale(1.1) translate(2.5vw, 1.2vw);
          transition: all 600ms;
        }
      }
    }

    .active {
      &::before {
        transform: skewX(-20deg) scale(1.1) translate(-3vw, -1vw) !important;
        height: 92% !important;
        background: linear-gradient(280deg, #92D341 -27.68%, #4FAD24 104.15%) !important;
      }

      &::after {
        transform: skewX(-20deg) scale(1.1) translate(2.5vw, -1vw) !important;
        height: 92% !important;
        background: linear-gradient(280deg, #92D341 -27.68%, #4FAD24 104.15%) !important;
      }
    }

    .changeBg {
      &::before {
        background: linear-gradient(180deg, #09152B 0%, rgba(9, 21, 43, 0.71) 100%) !important;
      }

      &::after {
        background: linear-gradient(180deg, #09152B 0%, rgba(9, 21, 43, 0.71) 100%) !important;
      }
    }
  }


  @media screen and (max-width: 1024px) {
    // padding-top: 60px;

    .banner {
      .swiper-container {
        .info {
          .text {
            width: 90%;

            .en {
              font-size: 18px!important;
              height: auto;
              position: relative;

            }

            .cn {
              font-size: 16px;
              height: auto;
            }
          }
        }
      }

      .add {
        img {
          width: 30px;
        }
      }
    }

    .products {
      width: 90%;
      margin: 30px auto;

      .t {
        .p1 {
          font-size: 24px;
        }

        a {
          font-size: 16px;
        }
      }

      .ptypes {
        width: 100%;
        margin: 20px auto;
        flex-wrap: wrap;
        // display: block;
        // overflow-x: scroll;
        // white-space: nowrap;

        .item {
           width:  25%;
          display: block;
          // margin-right: 20px;

          .icon {
            width: 50px;
            height: 50px;

            svg {
              max-width: 70%;
              max-height: 70%;
            }
          }

          p {
            font-size: 14px;
          }
        }
      }

      .cboxs {
        .content {
          .dbox1 {
            flex-direction: column;

            .l {
              width: 100%;
            }

            .r {
              width: 100%;
              margin: 110px 0 0 0;

              a {
                p {
                  font-size: 14px;
                  position: static;
                  margin-top: 10px;
                }
              }
            }
          }

          .text {
            bottom: 160px;
            position: absolute;
            left: 0;
            width: 100%;
            .p1 {
              font-size: 18px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .des {
              font-size: 16px;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
        }
      }
    }

    .about {
      padding: 30px 5%;
      margin-top: 30px;

      .d1 {
        width: 100%;

        .t {
          .p1 {
            font-size: 24px;
            text-align: center;
          }

          a {
            font-size: 16px;
          }
        }

        .des {
          font-size: 14px;
          margin: 20px 0;
        }
      }

      .d2 {
        flex-wrap: wrap;

        .item {
          width: 50%;
          text-align: center;
          margin-bottom: 10px;
          .nums {
            justify-content: center;

            .count {
              font-size: 32px;
            }

            i {
              font-size: 14px;
            }
            span:last-child{
              font-size: 18px;
            }

            span {
              font-size: 14px;
              margin-left: 5px;
            }
          }

          .tag {
            font-size: 16px;
            margin-top: 0;
          }
        }
      }

      .video {
        position: static;
        width: 100%;
        margin: 20px auto;

        video {
          height: 190px;
        }

        .play {
          svg {
            width: 60px;
          }
        }
      }
    }

    .news {
      width: 90%;
      margin: 30px auto;

      .t {
        .p1 {
          font-size: 24px;
        }

        a {
          font-size: 16px;
        }
      }

      .box {
        flex-direction: column;

        .l {
          width: 100%;

          .types {
            .item {
              font-size: 18px;
              margin-right: 30px;
            }
          }

          .allNews {
            margin-top: 15px;

            .list {
              a {
                padding: 10px 0;
                margin-top: 10px;

                .time {
                  font-size: 14px;
                }

                .pt {
                  font-size: 18px;
                  white-space: normal;
                }

                .des {
                  font-size: 16px;
                  display: none;
                }
              }
            }
          }
        }

        .r {
          width: 100%;
          margin-top: 20px;

          a {
            .time {
              font-size: 16px;
              margin: 10px 0 5px 0;
            }

            .pt {
              font-size: 18px;
            }

            .des {
              font-size: 16px;
            }
          }
        }
      }
    }

    .partners {
      padding: 30px 0;

      .t {
        font-size: 24px;
      }

      .t2 {
        font-size: 18px;
        width: 90%;
        margin: 10px auto 30px auto;
      }

      .scroll-container {
        .animate_box {
          .flex-xb {
            .icon {
              width: 80px;
              height: 80px;
              margin-right: 20px;
            }
          }
        }

        .animate_box2 {
          margin: 20px 0;
        }
      }
    }

    .business {
      padding: 0;

      .box {
        flex-direction: column;

        .item {
          width: 100%;

          .text {
            width: 90%;
            margin: 0 auto;

            .icon {
              img {
                width: 60px;
                height: auto;
              }
            }

            .p1 {
              font-size: 20px;
            }

            .p2 {
              font-size: 16px;
            }

            a {
              width: fit-content;
              margin: 15px auto;

              p {
                font-size: 16px;
              }
            }
          }
        }

        .item:nth-child(1) {
          &::before {
            transform: none;
          }
        }

        .item:nth-child(2) {
          &::after {
            transform: none;
          }
        }

        .active {
          &::before {
            transform: none !important;
            height: 100% !important;
          }

          &::after {
            transform: none !important;
            height: 100% !important;
          }
        }
      }
    }
  }
}